import React, { Component } from 'react'
import Icon from 'react-native-vector-icons/Ionicons'
import {
  StyleSheet,
  Text,
  View
} from 'react-native'

export default class Input extends Component {
  render() {
    return (
      <View style={ styles.container }>
        <Text>
          This is Input Component.
        </Text>
      </View>
    )
  }
}

export class FakeInput extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View style={ {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        height: 26,
        padding: 3,
        marginLeft: 10,
        marginRight: 10,
        borderWidth: 1,
        borderColor: '#FFFFFF',
        borderRadius: 3,
        backgroundColor: '#FFFFFF'
      } }>
        <Icon name='ios-search' size={ 20 } style={ {
          color: '#999999',
          paddingRight: 10,
          paddingLeft: 7
        } }></Icon>
        <Text style={ {
          color: '#999999',
          fontSize: 12,
          paddingRight: 10
        } }>
          {this.props.placeholder}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create( {
  container: {
    flex: 1
  }
} )